<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16" :offset="4">
        <el-form ref="dataForm" :model="temp" :rules="rules" label-width="100px" label-position="right">
          <el-form-item label="网站名称" prop="siteName">
            <el-input v-model="temp.siteName"></el-input>
          </el-form-item>
          <el-form-item label="网站地址" prop="siteUrl">
            <el-input v-model="temp.siteUrl"></el-input>
          </el-form-item>
          <el-form-item label="后台LOGO">
            <UploadImage v-model="temp.siteLogo" :config="config"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="temp.sitePhone"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="temp.siteEmail"></el-input>
          </el-form-item>
          <el-form-item label="联系QQ">
            <el-input v-model="temp.siteQq"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getConfig, setConfig } from '@/api/setting'
import waves from '@/directive/waves'
import myconfig from '@/config'
import UploadImage from '@/components/Upload/image'

export default {
  name: 'Setting',
  components: { UploadImage },
  directives: {
    waves
  },
  data() {
    return {
      listLoading: true,
      btnLoading: false,
      temp: {
        siteName: '',
        siteUrl: '',
        siteLogo: '',
        sitePhone: '',
        siteEmail: '',
        siteQq: ''
      },
      config: {
        fileName: 'img',
        limit: 1,
        multiple: false,
        accept: 'image/*',
        action: myconfig.uploadUrl.img
      },
      rules: {
        siteName: [{ required: true, message: '网站名称', trigger: 'blur' }],
        siteUrl: [{ required: true, message: '网站地址', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.listLoading = true
      getConfig('basic').then(response => {
        this.temp = response.data
        this.listLoading = false
      })
    },
    saveData() {
      this.btnLoading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          setConfig(this.temp).then(response => {
            if (response.status === 1) {
              this.$message.success(response.msg)
            } else {
              this.$message.error(response.msg)
            }
            this.btnLoading = false
          }).catch((error) => {
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
